<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8"/>
    <title>Java-ES</title>
    <link rel="stylesheet" th:href="@{/css/style.css}"/>

</head>

<body class="pg">
<div class="page" id="app">
    <div id="mallPage" class=" mallist tmall- page-not-market ">

        <!-- 头部搜索 -->
        <div id="header" class=" header-list-app">
            <div class="headerLayout">
                <div class="headerCon ">

                    <div class="header-extra">

                        <!--搜索-->
                        <div id="mallSearch" class="mall-search">
                            <form name="searchTop" class="mallSearch-form clearfix">
                                <fieldset>
                                    <legend>天猫搜索</legend>
                                    <div class="mallSearch-input clearfix">
                                        <div class="s-combobox" id="s-combobox-685">
                                            <div class="s-combobox-input-wrap">
                                                <input v-model="keyword" type="text" autocomplete="off"  id="mq"
                                                       class="s-combobox-input" aria-haspopup="true">
                                            </div>
                                        </div>
                                        <button @click.prevent="searchKey" type="submit" id="searchbtn">搜索</button>
                                    </div>
                                </fieldset>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <input v-model="pageNo" type="text" value="页码">页码
        <input v-model="pageSize" type="text" value="展示条数">条数

        <!-- 详情页面 -->
        <div id="content">
            <div class="main">
                <!-- 详情 -->
                <div class="view grid-nosku">

                    <div  v-for="item in results">
                        <div>
                            <!--标题-->
                            <p>
                                <a style="font-size: medium">{{item.title}}</a>
                            </p><br>
                            <p class="message">
                                <a v-html="item.message"></a>
                            </p>&nbsp &nbsp&nbsp&nbsp<input type="button" @click="lookDetails(item.id)" name="查看详情" value="查看详情">
                            <hr><br>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/js/axios.min.js}"></script>
<script th:src="@{/js/vue.min.js}"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            keyword: '',
            results: [],
            pageNo: 1,
            pageSize: 10
        },
        methods: {
            searchKey(){
                var keyword = this.keyword;
                var pageNo = this.pageNo;
                var pageSize = this.pageSize;
                axios.get('http://localhost:9090/search/'+keyword+"/"+pageNo+"/"+pageSize).then(response=>{
                    console.log(response)
                    this.results = response.data.records;
                })
            },
            lookDetails(id){
                console.log("e的内容"+id);
                location.href='http://localhost:9090/details/'+ id;
            }

        }
    })

</script>

</body>
</html>